<!--包租合同-->
<template>
		<a-modal v-bind="option" title="提示" ok-text="确认" cancel-text="取消" @ok="success" class="add-charter-model">
			<div>以下房间签约的业主合同周期与当前企业合同的周期冲突,您确定继续操作吗?</div>
			<div>冲突房源:</div>
			<template v-for="(item, index) in conflictRoomNameList" :key="item.id">
				<div v-if="index < 3">{{ item.houseAddress }}</div>
				<div v-if="index === 3">...</div>
			</template>
		</a-modal>
</template>

<script lang="ts" setup>
	import {useStore} from '@/store'
	import { reactive, ref, toRef} from 'vue'


	const store = useStore()

	const props = defineProps<{
		visible: boolean
		conflictRoomNameList?: any[]
	}>()

	const emits = defineEmits(['update:visible', 'success'])
	const option = reactive({
		width: 400,
		title: '提示',
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			visibles.value = false
			emits('update:visible', false)
		}
	})

	const visibles = ref(true)
	// watch(
	// 	() => visibles.value,
	// 	(newVal: boolean) => {
	// 		if (!newVal) {
	// 			option.onCancel()
	// 		}
	// 	}
	// )

	// 传递事件到外层
	const success = () => {
		emits('update:visible', false)
		emits('success')
	}
</script>

<style lang="less">
	.add-charter-model {
		.ant-modal-body {
			padding: 0 16px;
			overflow: auto;
			min-height: 135px;

			.ant-form-item {
				margin-bottom: 16px;

				label[for='form_item_beginTime'] {
					display: flex;

					.display-flex {
						flex: 1;
						justify-content: space-around;
					}
				}
			}

			.custom-radio-group {
				.ant-space {
					display: flex;

					.ant-space-item {
						flex: 1;
					}
				}

				.ant-radio-button-wrapper {
					height: 96px;
					display: block;

					.ant-typography {
						margin-bottom: 6px;
					}
				}
			}

			.template-select-wrapper {
				.ant-form-item-control {
					flex-direction: row;
					align-items: center;
					gap: 16px;

					.ant-select-selection-search {
						left: 0;
					}

					.ant-form-item-extra {
						color: @warning-color;
						font-size: @font-size-sm;
					}
				}

				.ant-select {
					width: 160px;

					.ant-select-selector {
						padding: 0;
						font-size: @font-size-sm;
					}
				}
			}

			.month-quick-radio-group {
				.ant-radio-button-wrapper {
					padding: 0 9px;
				}
			}

			.ant-input-number-group-addon {
				background: #fff;
				color: @text-color;
			}

			.edit-table-row {
				.ant-input,
				.ant-select-selector {
					padding: 0;
					border: none;
				}

				.ant-select,
				.ant-input-number {
					width: 100%;
				}

				.ant-radio-wrapper:last-child {
					margin-right: 0;
				}
			}
		}
	}
</style>
